<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
  <style>
    #fdj {
      position: relative;
      width: 450px;
      height: 450px;
    }
    #fdj img{
      width: 450px;
      height: 450px;
    }
   #fdj #mengban {
      position: absolute;
      display: none;
      width: 225px;
      height: 225px;
      background-color: yellow;
      opacity: .4;
      cursor: move;
      left: 0;
      top: 0;
    }
    #fdj #fdjbox {
      position: absolute;
      width: 450px;
      height: 450px;
      top: 0;
      left: 460px;
      background-image: url("img/lunbo1.jpg");
      background-repeat: no-repeat;
      background-size: 200% 200%;
      display: none;
    }
  </style>
</head>
<body>
<div id="fdj">
<img src="img/lunbo1.jpg" alt="">
  <div id="mengban"></div>
<div id="fdjbox"></div>
</div>
<script>
  window.onload =function (){
    var fdj =document.getElementById('fdj')
    var img = document.getElementsByTagName('img')[0]
    var mengban = document.getElementById('mengban')
    var fdjbox = document.getElementById('fdjbox')

    fdj.onmousemove = function (e){
      var left =e.clientX - img.width / 2 / 2
      var top = e.clientY - img.height / 2 /2

      //选择检验
      if (left < 0){left=0}
      if(left >225){left=225}
      if(top >225){top =225}
      if (top< 0){top=0}

      //设置范围
      mengban.style.left = left +"px"
      mengban.style.top = top +"px"

      //蒙版显示
      mengban.style.display='block';

      //调整位置
      fdjbox.style.backgroundPosition = (-2 *left) +'px ' +(-2 * top) +'px'

      //设置放大效果展示
      fdjbox.style.display='block';
    }
    fdj.onmouseout = function (){
      mengban.style.display='none'
      fdjbox.style.display='none'

    }
  }
</script>
</body>
</html>
